<template>
  <el-container>
    <el-header height="100px">业务四部最强辅助
        <div class="userInfo">当前用户：
            <span v-text="userName"></span>
            <button @click="logout">退出</button>
        </div>
    </el-header>
    <el-container>
        <el-aside width="200px">
            <el-menu
                class="el-menu-vertical-demo"
                >
                <el-menu-item index="1" @click="toContent(1)" v-if="hasRole('知识之库')">
                    <i class="el-icon-menu"></i>
                    <span slot="title">知识之库</span>
                </el-menu-item>
                <el-menu-item index="2" @click="toContent(2)" v-if="hasRole('产品目录')">
                    <i class="el-icon-menu"></i>
                    <span slot="title">产品目录</span>
                </el-menu-item>
                <el-menu-item index="3" @click="toContent(3)" v-if="hasRole('系统管理')">
                    <i class="el-icon-menu"></i>
                    <span slot="title">系统管理</span>
                </el-menu-item>
                <el-menu-item index="4" @click="toContent(4)" v-if="hasRole('订单管理')">
                    <i class="el-icon-menu"></i>
                    <span slot="title">订单管理</span>
                </el-menu-item>
                <el-menu-item index="5" @click="toContent(5)" v-if="hasRole('费用预算')">
                    <i class="el-icon-menu"></i>
                    <span slot="title">费用预算</span>
                </el-menu-item>
                <el-menu-item index="6" @click="toContent(6)" v-if="hasRole('汇率管理')">
                    <i class="el-icon-menu"></i>
                    <span slot="title">汇率管理</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main>业务四部内部系统</el-main>
    </el-container>
  </el-container>
</template>
<script>
import {getSessionStore} from '../components/util/util.js'

export default {
  data(){
      return {
          userName:sessionStorage.getItem('name'),
          userType:getSessionStore('type'),
          role:['知识之库','产品目录','系统管理','订单管理','费用管理','汇率管理'],
          myRole:[]
      }
  },
  created(){
    if(!sessionStorage.getItem('loginkey')){
    //   console.log('没登录')
      this.$router.push('/login');
    }else{
        var params = new URLSearchParams();
        params.append('name', sessionStorage.getItem('name'));
        params.append('loginkey', sessionStorage.getItem('loginkey'));
        
        this.$http.post('http://'+this.IP+'/api/getUserInfo.php',params)
        .then((res)=>{
            if(res.data[0]['permission'] == 1111){
            this.$store.state.isAdmin = true;
            }else{
            this.$store.state.isAdmin = false;
            }

            this.myRole = res.data[0]['role'].split(',')
        })
    }
  },
  methods:{
      toContent(type){
          switch(type){
            case 1:
                this.$router.push('/tags')
            break;
            case 2:
                this.$router.push('/products')
            break;
            case 3:
                this.$router.push('/admin')
            break;
            case 4:
                this.$router.push('/orderlist')
            break;
            case 5:
                this.$router.push('/fee')
            break;
            case 6:
                this.$router.push('/exchange')
            break;
          }
      },
      logout(){
        sessionStorage.removeItem('loginkey');
        sessionStorage.removeItem('name');
        this.$router.push('./login');
      },
      hasRole(role){
          return this.myRole.indexOf(role) >= 0
      }
  }
}
</script>
<style scoped>
  .el-header{
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 100px;
  }
  
  .el-aside {
    text-align: center;
    line-height: 400px;
  }
  
  .el-main {
    /* background-color: #E9EEF3; */
    color: #333;
    text-align: center;
    line-height: 400px;
  }
  .userInfo{
      position: absolute;
      top: 40px;
      right: 20px;
  }
  .userInfo span{
      color: brown;
  }
  .userInfo span{
      margin-right: 10px
  }
  
  /* body > .el-container {
    margin-bottom: 40px;
  } */
  
  /* .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  } */
</style>
